<template>
	<view class="content">
		<view class="top">
			<view class="swiperHead">
				 <swiperNavBar
				 	:scrollIntoView="scrollIntoView"
				 	:swiperTabList='swiperTabList' 
				 	:swiperTabIdx='swiperTabIdx' 
				 	:currentSwiperWidth='currentSwiperWidth' 
				 	:currentSwiperHeight='currentSwiperHeight' 
				 	:swiperCurrentSize='swiperCurrentSize'
				 	:swiperColor='swiperColor' 
				 	:swiperCurrentColor='swiperCurrentColor' 
				 	:currentSwiperLineShow="currentSwiperLineShow"
				 	:currentSwiperLineActiveWidth="currentSwiperLineActiveWidth"
				 	:currentSwiperLineActiveHeight="currentSwiperLineActiveHeight"
				 	:currentSwiperLineActiveBg="currentSwiperLineActiveBg"
				 	:currentSwiperLineAnimatie="currentSwiperLineAnimatie" 
				 	v-if=" swiperTabList.length > 1 "
				 	@change="currentTab">
				 </swiperNavBar>
			</view>
		</view>
		<view class="swiperCont" >
			<swiper class="swiper" circular=true :current="swiperTabIdx" @change="swiperChange" style="background-color: #f2f2f2;">
				<swiper-item :item-id="'slide'+index" v-for="(item,index) in swiperTabList">
					<scroll-view scroll-top="0" scroll-y='true' @scrolltolower="more">
						<view class="noData" v-if="genjin.list.length<1">暂无数据</view>
						<view class="row" @tap="navTo('/pages/works/detail?id='+item.commission_id+'&status='+item.status)" v-for="(item,index) in genjin.list" :key="index" v-else>
							<view class="record-list">
								<view class="record-list-title">{{item.loupan_name||"-"}}</view>
								<view class="record-list-title">{{item.cus_name}}</view>
								<view class="record-list-title">{{item.content||" "}}</view>
								<uni-icons type="arrowright" class="record-list-icon" style="font-size: 48upx; vertical-align: middle; color: #d1d1d1;"></uni-icons>
								
								<view class="uni-time">{{item.checktime|time}}</view>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
				
			</swiper>
		</view>
		<!--内容-->
		
	</view>

</template>

<script>
	import {
		worksList
	} from '@/api/userInfo';
	import {
		followStatus,followList
	} from '@/api/follow';
	import rfLoadMore from '@/components/oa-load-more/oa-load-more';
	import moment from '@/common/moment';
	import $mAssetsPath from '@/config/assets.config';
	import oaEmpty from '@/components/oa-empty';
	import swiperNavBar from "@/components/swiper/swiperNavBar.vue";
	export default {
		components: {
			rfLoadMore,
			oaEmpty,
			swiperNavBar
		},
		data() {
			return {
				scrollIntoView:0,//设置哪个方向可滚动，则在哪个方向滚动到该元素
				swiperTabList:[],//导航列表
				swiperTabIdx:0,
				swiperCurrentSize:'32rpx',//导航的字体大小
				swiperColor:'#333333',//导航栏字体未选中前颜色
				swiperCurrentColor:'#0099e3',//选中当前导航栏字体颜色
				currentSwiperWidth:'25%',//当前导航的宽度 % upx rpx px  （导航超出可左右滑动 ）
				currentSwiperHeight:88,//当前导航的高度度 rpx px
				mainHeight:'100%',//全屏或者局部滑动设置的高度
				currentSwiperLineShow:true,//是否显示导航栏的线条 （线条距离标题太近的话可自行修改.swiperLine的css）
				currentSwiperLineActiveBg:'#0099e3',//当前选中的导航栏线条颜色
				currentSwiperLineActiveWidth:'40%', //当前选中的导航栏线条的宽度 upx rpx px
				currentSwiperLineActiveHeight:'6rpx',//当前选中的导航栏线条的高度度 upx rpx px
				currentSwiperLineAnimatie: 300,//当前选中的导航栏线条过渡效果
				worksList: [],
				page: 1,
				// cate_id: '',
				loadingType: 'more',
				loading: true,
				hasLogin: false,
				moneySymbol: this.moneySymbol,
				// 控制滑动效果
				theIndex: null,
				oldIndex: null,
				genjin:{
					list:[]
				}
			};
		},
		methods: {
			currentTab:function(index,title){
				this.swiperTabIdx = index;
				this.scrollIntoView = Math.max(0, index - 1);
			},
			//滑动事件  自行完善需要的代码
			swiperChange:function(e){
				this.swiperTabIdx = e.detail.current;
				this.scrollIntoView = Math.max(0, e.detail.current - 1);
				followList(this.swiperTabIdx).then(data => {
					this.genjin.list=data.list
				});
			},
			// 数据初始化
			initData() {
				this.hasLogin = this.$mStore.getters.hasLogin;
				this.page = 1;
				this.worksList.length = 0;
				this.getworksList();
				uni.setNavigationBarColor({
					frontColor: '#ffffff',
					backgroundColor: this.themeColor.color,
					animation: {
						duration: 400,
						timingFunc: 'easeIn'
					}
				})
			},
			// 获取资料列表
			async getworksList(type) {
				if (!this.hasLogin) {
					this.loading = false;
					if (type === 'refresh') uni.stopPullDownRefresh();
					uni.removeTabBarBadge({
						index: this.$mConstDataConfig.worksIndex
					});
					return;
				}
				await this.$http.get(`${worksList}`, {
						page: this.page
					}).then(r => {
						this.loading = false;
						if (type === 'refresh') {
							uni.stopPullDownRefresh();
						}
						this.loadingType = r.data.length === 10 ? 'more' : 'nomore';
						this.worksList = [...this.worksList, ...r.data];
					})
					.catch(() => {
						this.loading = false;
						if (type === 'refresh') {
							uni.stopPullDownRefresh();
						}
					});
			},
			navToLogin(route) {
				this.$mRouter.push({
					route
				});
			},
			navTo(route) {
				this.$mRouter.push({
					route
				});
			}
		},
		onLoad(e) {
			console.log(e)
			this.swiperTabIdx=e.swiperTabIdx
			followStatus().then(data => {
				this.swiperTabList=data
			});
			followList(this.swiperTabIdx).then(data => {
				this.genjin.list=data.list
			});
		},
		filters: {
			time(val) {
				return moment(val * 1000).format('YYYY-MM-DD HH:mm:ss');
			},
			date(val) {
				return moment(val * 1000).format('YYYY-MM-DD');
			},
		},
		async onShow(options) {
			await this.initData();
		},

		// 下拉刷新
		onPullDownRefresh() {
			this.page = 1;
			this.worksList = [];
			this.loading = true;
			this.getworksList('refresh');
		},
		// 加载更多
		onReachBottom() {
			if (this.loadingType === 'nomore') return;
			this.page++;
			this.getworksList();
		}
	};
</script>

<style lang="scss">
	@import url("@/static/css/common.css");
	page {
		background-color: $page-color-base;
	}
	.swiper{
		height: 750px;
		background-color: white;
	}
	.notify-wrapper {
			background-color: $color-white;
			width: 100%;
			padding: $spacing-base $spacing-lg $spacing-base 80upx;
			margin: $spacing-base 0 0;
			border-radius: 15upx;
			position: relative;
	
			.title {
				font-size: $font-lg;
				color: $font-color-dark;
				font-weight: 500;
				margin: 0 0 $spacing-sm;
			}
	
			.content {
				font-size: $font-sm;
				color: $font-color-base;
				height: 75upx;
				line-height: 36upx;
			}
	
			.time {
				font-size: $font-base;
				color: $font-color-light;
			}
	
			.type {
				position: absolute;
				top: 26upx;
				left: -10upx;
				border: none;
				font-size: $font-sm;
				opacity: 0.8;
			}
	
			.un-read {
				display: inline-block;
				width: 12upx;
				height: 12upx;
				border-radius: 50%;
				position: absolute;
				top: 32upx;
				right: 30upx;
			}
		}
</style>
